<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ichartjs 示例</title>
<meta name="Description"
	content="The ichartjs's gallery center,ichartjs 示例中心" />
<meta name="Keywords"
	content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
<script type="text/javascript" src="${basePath}script/jquery.js"></script>
<script type="text/javascript"
	src="${basePath}script/ichart/ichart.1.2.min.js"></script>
<link rel="stylesheet" href="${basePath }style/ichart/ichart.css"
	type="text/css"></link>
<script type="text/javascript">
var dataObj;
var date = new Date();
var year = date.getFullYear();
	
//var max = ${maxRreport};
//获取等分数
 function getscale(max){
	var len =  max.toString().length;
	var divisor =  Math.pow(10,len-1);
	var firstNum = parseInt(max/divisor);
	return (firstNum+1)*(Math.pow(10,len-2));
}   

function ajax(year){
	 	$.ajax({
			type : "POST",
			url : "report_ajaxReturnGoodsReport.do",
			data : {year:year},
			dataType:"JSON",
			async : false,
			success : function(msg) {
			dataObj=eval("("+msg+")");
			}
			
		});
		 
		};

	$(function() {
	//给年份下拉框赋值
	$("#o0").attr("value",year);
	$("#o0").text("请选择年份：");
	$("#o1").attr("value",year-4);
	$("#o1").text(year-4);
	$("#o2").attr("value",year-3);
	$("#o2").text(year-3);
	$("#o3").attr("value",year-2);
	$("#o3").text(year-2);
	$("#o4").attr("value",year-1);
	$("#o4").text(year-1);
	$("#o5").attr("value",year);
	$("#o5").text(year);
	
	ajax(year-1);
	year = year-1;
	
	$("#selectYear").bind("change",function(){
		year = $("#selectYear option:selected").val();
		//alert(year);
		ajax(year);
		drawYear();
		//window.location.href = "report_returnGoodsUI.do?year="+year;
	});
	

	});

	$(function() {

	drawYear();
	
		
	});
	
	function drawYear(){
	
	var data = [ {
			name : '1月',
			value : dataObj.m1,
			color : '#849fb4'
		}, {
			name : '2月',
			value : dataObj.m2,
			color : '#bf9d32'
		}, {
			name : '3月',
			value : dataObj.m3,
			color : '#728f1b'
		}, {
			name : '4月',
			value : dataObj.m4,
			color : '#bf784c'
		}, {
			name : '5月',
			value : dataObj.m5,
			color : '#2f8586'
		}, {
			name : '6月',
			value : dataObj.m6,
			color : '#728f1b'
		}, {
			name : '7月',
			value : dataObj.m7,
			color : '#bf784c'
		}, {
			name : '8月',
			value : dataObj.m8,
			color : '#728f1b'
		}, {
			name : '9月',
			value : dataObj.m9,
			color : '#2f8586'
		}, {
			name : '10月',
			value : dataObj.m10,
			color : '#bf9d32'
		}, {
			name : '11月',
			value : dataObj.m11,
			color : '#849fb4'
		}, {
			name : '12月',
			value : dataObj.m12,
			color : '#2f8586'
		} ];
		var data1 = [ {
			name : '进货统计',
			value : [ dataObj.m1,dataObj.m2,dataObj.m3,dataObj.m4,dataObj.m5,dataObj.m6,dataObj.m7,dataObj.m8,dataObj.m9,dataObj.m10,dataObj.m11,dataObj.m12],
			color : '#aa4643',
			line_width : 3
		} ];

		//是否启用动画
		var animation = true;

		var chart = new iChart.Column3D({
			render : 'canvasDiv',
			data : data,
			title : {
				text : '年进货消费统计',
				color : '#3e576f'
			},
			subtitle : {
				text : year,
				color : '#6d869f'
			},
			footnote : {
				text : year,
				color : '#909090',
				fontsize : 11,
				padding : '0 38'
			},
			width : 800,
			height : 400,
			animation : animation,
			animation_duration : 600,
			shadow : true,
			shadow_blur : 2,
			shadow_color : '#aaaaaa',
			shadow_offsetx : 1,
			shadow_offsety : 0,
			zScale : 0.5,
			xAngle : 50,
			bottom_scale : 1.1,
			column_width : 90,
			label : {
				color : '#4c4f48'
			},
			sub_option : {
				label : {
					color : '#4c4f48'
				},
				listeners : {
					parseText : function(r, t) {
						//自定义柱形图上方label的格式。
						return '￥' + t;
					}
				}
			},
			text_space : 16,//坐标系下方的label距离坐标系的距离。
			coordinate : {
				background_color : '#d5d8d1',
				grid_color : '#919d7e',
				color_factor : 0.24,
				board_deep : 10,//背面厚度
				pedestal_height : 10,//底座高度
				left_board : false,//取消左侧面板
				height : '80%',
				width : '80%',
				shadow : true,//底座的阴影效果
				wall_style : [ {//坐标系的各个面样式
					color : '#333333'
				}, {
					color : '#b2b2d3'
				}, {
					color : '#a6a6cb'
				}, {
					color : '#333333'
				}, {
					color : '#74749b'
				}, {
					color : '#a6a6cb'
				} ],
				scale : [ {
					position : 'left',
					start_scale : 0,
					scale_space : getscale(dataObj.max) ,
					end_scale : dataObj.max,
					label : {
						color : '#4c4f48'
					},
					listeners : {
						parseText : function(t, x, y) {
							//自定义左侧坐标系刻度文本的格式。
							return {
								text : '￥' + t
							}
						}
					}
				}/* , {
					position : 'right',
					start_scale : 0,
					scale_space : 1000,
					end_scale : "${maxRreport}",
					scaleAlign : 'right',
					label : {
						color : '#aa4643'
					},
					listeners : {
						parseText : function(t, x, y) {
							//自定义右侧坐标系刻度文本的格式。
							return {
								text : '$' + t + 'k'
							}
						}
					}
				}  */]
			}
		});

		var line = new iChart.LineBasic2D(
				{
					z_index : 1000,
					data : data1,
					label : {
						color : '#4c4f48'
					},
					point_space : chart.get('column_width')
							+ chart.get('column_space'),
					tip : {
						enable : true,
						listeners : {
							//tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
							parseText : function(tip, name, value, text, i) {
								return "当月进货消费:" + "￥" + value;
							}
						}
					},
					scaleAlign : 'right',
					sub_option : {
						smooth : true,
						label : false,
						hollow_inside : false,
						point_size : 14
					},
					animation : animation,
					coordinate : chart.coo
				});

		chart.plugin(line);

		//利用自定义组件构造左侧说明文本。
		chart
				.plugin(new iChart.Custom(
						{
							drawFn : function() {
								//计算位置
								var coo = chart.getCoordinate(), x = coo
										.get('originx'), y = coo.get('originy'), H = coo.height;
								//在左侧的位置，渲染说明文字。
								chart.target.textAlign('center').textBaseline(
										'middle').textFont('600 13px Verdana')
										.fillText('', x - 50,
												y + H / 2, false, '#6d869f',
												false, false, false, -90);

							}
						}));

		chart.draw();
	}
	
	
	
	
	
</script>
</head>
<body>
<select id ="selectYear">
	<option id="o0" value="-1">请选择年份：</option>
	<option id="o1" value="1">1</option>
	<option id="o2" value="2">2</option>
	<option id="o3" value="3">3</option>
	<option id="o4" value="4">4</option>
	<option id="o5" value="5">5</option>
</select>
	<%-- <s:select id="selectYear" headerKey="year" headerValue="请选择年份:" 
		list="#{'2012':'2012','2013':'2013','2014':'2014','2015':'2015'}"></s:select> --%>
	<div id='canvasDiv'></div>
</body>
</html>